<template>
  <transition name="fade" v-on:after-enter="afterEnter">
    <div v-if="show" class="wrap">
<!--      <head-bar :pageInfo="pageInfo" />-->
      <div class="news-list">
        <slider :list="pageInfo.news" :loop="true" :speed='pageInfo.newstime' v-if="sliders.length" width="100%" />
        <!--      <article v-for="item in pageInfo.news" :key="item.id">-->
        <!--        <div class="pic"><img :src="item.img" alt=""></div>-->
        <!--        <h2>{{item.title}}</h2>-->
        <!--        <div class="content" v-html="item.content"></div>-->
        <!--      </article>-->
      </div>
      <div class="schedule">
        <ul class="weeks">
          <li class="item dt">
            <div class="week"></div>
            <div class="am">
              <div class="list">上午</div>
            </div>
            <div class="pm">
              <div class="list">下午</div>
            </div>
            <div class="night">
              <div class="list">晚上</div>
            </div>
          </li>
          <li class="item dd" v-for="(item,index) in pageInfo.activity" :key="index">
            <div class="week">{{item.name}}</div>
            <div class="am">
              <ul class="list">
                <li v-for="(am,index) in item.am" :key="index">
                  <div class="txt">{{am.name}}</div>
                  <div class="time">{{am.acttime}}</div>
                </li>
              </ul>
            </div>
            <div class="pm">
              <ul class="list">
                <li v-for="(pm,index) in item.pm" :key="index">
                  <div class="txt">{{pm.name}}</div>
                  <div class="time">{{pm.acttime}}</div>
                </li>
              </ul>
            </div>
            <div class="night">
              <ul class="list">
                <li v-for="(night,index) in item.night" :key="index">
                  <div class="txt">{{night.name}}</div>
                  <div class="time">{{night.acttime}}</div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script>
import NewsSlider from '../components/NewsSlider'

export default {
  name: 'News',
  components: {
    'slider': NewsSlider
  },
  data () {
    return {
      sliders: [
        {
          linkUrl: 'http://y.qq.com/w/album.html?albummid=001RsOK33No4Sz&ADTAG=myqq&from=myqq&channel=10007100',
          picUrl: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000001EwfWs4QSIl6.jpg?max_age=2592000'
        },
        {
          linkUrl: 'https://y.qq.com/msa/270/0_5102.html?ADTAG=myqq&from=myqq&channel=10007100',
          picUrl: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000001CV9tc1xK59w.jpg?max_age=2592000'
        },
        {
          linkUrl: 'https://y.qq.com/m/client/music_headline/index.html?_hidehd=1&_button=2&zid=689728&ADTAG=myqq&from=myqq&channel=10007100',
          picUrl: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000002n0L9H3Bf8F0.jpg?max_age=2592000'
        },
        {
          linkUrl: 'http://y.qq.com/w/album.html?albummid=001cTmxl1t64WK&ADTAG=myqq&from=myqq&channel=10007100',
          picUrl: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000001pf9Sy13Evav.jpg?max_age=2592000'
        },
        {
          linkUrl: 'https://y.qq.com/msa/324/0_5116.html?ADTAG=myqq&from=myqq&channel=10007100',
          picUrl: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000002QkMgs2GfWgL.jpg?max_age=2592000'
        }
      ],
      pad: false,
      show: false,
      pageInfo: {
        'time': 3000,
        'nextrouter': 'xxxx',
        'prerouter': 'xxx',
        'weatherType': '1',
        'weartherContent': '晴转多云',
        'temperature': '26-27',
        'newstime': 3000,
        'name': '新闻和活动',
        'news': [
          {
            'img': 'httsssd',
            'title': '新闻白鸥体',
            'content': 'sdfksdjfdsfsdf'
          },
          {
            'img': 'httsssd',
            'title': '新闻白鸥体',
            'content': 'sdfksdjfdsfsdf'
          },
          {
            'img': 'httsssd',
            'title': '新闻白鸥体',
            'content': 'sdfksdjfdsfsdf'
          }
        ],
        'activity': [
          {
            'name': '周一',
            'am': [
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              },
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              },
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              }
            ],
            'pm': [
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              },
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              }
            ],
            'night': [
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              }
            ]
          },
          {
            'name': '周二',
            'am': [
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              },
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              },
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              }
            ],
            'pm': [
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              },
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              }
            ],
            'night': [
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              }
            ]
          },
          {
            'name': '周三',
            'am': [
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              },
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              },
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              }
            ],
            'pm': [
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              },
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              }
            ],
            'night': [
              {
                'name': 'sdfsdfs',
                'acttime': '9:00-21:00'
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    const that = this
    /**
     * deviceType
     * pad 显示按钮控制
     * tv 不显示按钮控制
     */
    const deviceType = this.$route.query.deviceType
    this.pad = deviceType === 'pad'
    this.pageDataTimer = setInterval(async () => {
      that.getPageInfo()
    }, that.pageInfo.time)
  },
  computed: {},
  methods: {
    afterEnter () {
      // console.log('entered')
    },
    async getPageInfo () {
      const that = this
      const params = {
        id: that.$route.query.id,
        'from': that.$route.query.deviceType,
        curRouter: 'news'
      }
      await that.$store.dispatch('getNews', params)
      that.pageInfo = that.$store.state.pagenews
      that.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap {
    background: url('../assets/images/news-bg.jpg') no-repeat center center;
  }
  .news-list {
    position: absolute;
    left: 81px;
    top: 151px;
    width: 534px;
    height: 881px;
    overflow: hidden;
    article {
      .pic {
        img {
          max-width: 100%;
          max-height: 250px;
        }
      }
      h2 {
        padding: 20px 0;
        font-size: $fz7;
        font-weight: bold;
        line-height: 1.5;
      }
      .content {
        line-height: 1.8;
        font-size: $fz4;
      }
    }
  }
  .schedule {
    $w: 1129px;
    $w-dt: 123px;
    $h-head: 66px;
    $h-am: 310px;
    $h-pm: 332px;
    $h-night: 190px;

    position: absolute;
    left: 746px;
    top: 126px;
    width: $w;
    height: 901px;
    .weeks {
      @include clearfix();
      .item {
        @include fl();
        .week {
          height: $h-head;
          line-height: $h-head;
          font-size: $fz7;
          font-weight: bold;
        }
        .am, .pm, .night {
          display: table;
          width: 100%;
          .list {
            width: 100%;
            display: table-cell;
            vertical-align: middle;
            font-weight: bold;
            li {
              padding: 10px 0;
            }
            .txt {
              font-size: $fz3;
              width: 90%;
              margin: 0 auto;
              //@include ell();
            }
            .time {
              width: ($w - $w-dt)/7;
              font-size: $fz2;
            }
          }
        }
        .am {
          height: $h-am;
        }
        .pm {
          height: $h-pm;
        }
        .night {
          height: $h-night;
        }
      }
      .dt {
        width: $w-dt;
        font-size: $fz7;
        font-weight: bold;
      }
      .dd {
        $last: 115px;
        width: ($w - $w-dt - $last)/6;
        text-align: center;
        &:last-child {
          width: $last;
        }
      }
    }
  }
</style>
